<template>
  <a-menu
    class="course-menu"
    v-model:openKeys="openKeys"
    v-model:selectedKeys="selectedKeys"
    mode="inline"
    :items="computedMenuList"
    v-bind="$attrs"
  />
</template>
<script setup lang="ts">
import type { ICourseMenu } from '@/interface/course';
import type { MenuProps } from 'ant-design-vue';
import { computed, ref } from 'vue';

interface IProps {
  menuList: ICourseMenu[];
}
const props = withDefaults(defineProps<IProps>(), {
  menuList: () => [],
});

const computedMenuList = computed((): MenuProps['items'] => {
  const recursive = (menus: ICourseMenu[]): MenuProps['items'] => {
    const menuList = [];
    for (let i = 0; i < menus.length; i++) {
      const m = menus[i];
      const newMenu: MenuProps['items'][number] & { id?: string; children?: MenuProps['items'] } = {
        ...m,
        id: m.id + '',
      };
      if (m.children && m.children.length) {
        newMenu.children = recursive(m.children);
      } else {
        delete newMenu.children;
      }
      menuList.push(newMenu);
    }
    return menuList;
  };

  return recursive(props.menuList);
});

const openKeys = ref<string[]>(['sub1']);
const selectedKeys = ref<string[]>(['1']);
</script>

<style lang="less" scoped>
.course-menu {
  height: 100%;
  overflow-y: auto;
  border-right: 1px solid #0000000e;
}
</style>
